<template>
  <div class="detail" :key="num">
    <!-- 头部 -->
    <van-nav-bar title="合租" left-arrow @click-left="TopBack" id="aa">
      <template #title>
        <span class="title">{{ state.detailList.lease }} </span>
        <span class="titlelet"> · {{ state.detailList.apartment }}</span>
      </template>
      <template #right>
        <!-- 之后点击消息将 badge变成false不会变成红色的-->
        <van-icon
          name="chat-o"
          :badge="badge"
          size="22"
          @click="onbadge"
          :dot="dot"
        />
        <van-icon name="shrink" size="22" />
      </template>
    </van-nav-bar>
    <!-- 主题 -->
    <van-tabs v-model:active="active">
      <van-tab :title="'卧室' + '(' + data.num + ')'"></van-tab>
      <van-tab :title="'客厅' + '(' + data.num + ')'"></van-tab>
      <van-tab :title="'周边环境' + '(' + data.num + ')'"></van-tab>
      <van-tab disabled></van-tab>
    </van-tabs>
    <!-- 渲染的详情图 -->
    <!-- v-for key -->
    <!-- 可以通过 lazy-render 属性来开启懒加载模式。 -->
    <!-- 每个 SwipeItem 代表一张轮播卡片，可以通过 autoplay 属性设置自动轮播的间隔。 -->
    <div class="detailimg">
      <van-swipe class="my-swipe" :autoplay="5000" indicator-color="white">
        <van-swipe-item
          v-for="(item, index) in state.detailList.imgs"
          :key="index"
          ><img :src="item" alt="" style="width: 320px; height: 205px"
        /></van-swipe-item>
      </van-swipe>
    </div>
    <!-- 图片下面文字说明 -->
    <div class="explain">
      <span>巴乐兔管家服务</span>
      <span>免佣</span>
      <span v-for="(item, index) in state.detailList.inform" :key="index">
        {{ item }}
      </span>
      <!-- <span>近地铁</span>
      <span>非一楼</span>
      <span>朝南</span> -->
    </div>
    <!-- 价格付款方式 -->
    <div>
      <div data-v-31fd8a25="" class="house-price-wrapper">
        <div data-v-31fd8a25="" class="house-price-left">
          <div data-v-31fd8a25="" class="price-text">
            <span data-v-31fd8a25="" class="bold">
              {{ state.detailList.price }} </span
            >元/月
          </div>
          <!---->
        </div>
        <div data-v-31fd8a25="" class="price-detail-title">
          <span @click="onClickpay">付款方式</span>
          <i data-v-31fd8a25="" class="icon-arrow"></i>
          <van-popup
            v-model:show="show3"
            round
            position="bottom"
            :style="{ height: '50%' }"
          >
            <div class="popmessage">
              <div class="pricedetail">费用详情</div>
              <div class="zujin">
                <span>租金</span>
                <span>如有疑问，请电话咨询</span>
              </div>
              <ul>
                <li style="background: #f6f6f6">
                  <span>押金</span><span>7500元</span>
                </li>
                <li style="background: #fafafa">
                  <span>付三押一</span>
                  <span>¥7500/月</span>
                </li>
                <li style="background: #f6f6f6">
                  <span>首期共支付</span>
                  <span>30000元</span>
                </li>
              </ul>
              <!-- 我知道了 -->
              <div class="iknow" @click="show3 = false">我知道了</div>
            </div>
          </van-popup>
        </div>
      </div>
    </div>
    <!-- 朝向 -->
    <li data-v-31fd8a25="" class="house-ms">
      <ul data-v-31fd8a25="">
        <li data-v-31fd8a25="">
          <div data-v-31fd8a25="">{{ state.detailList.face }}</div>
          <div data-v-31fd8a25="" class="bold">
            <!-- 朝向 次卧主卧 -->
            {{ state.detailList.face }} {{ state.detailList.room }}
          </div>
        </li>
        <li data-v-31fd8a25="">
          <div data-v-31fd8a25="">面积</div>
          <div data-v-31fd8a25="" class="bold">
            {{ state.detailList.area }}M²
          </div>
        </li>
        <li data-v-31fd8a25="">
          <div data-v-31fd8a25="">楼层</div>
          <div data-v-31fd8a25="" class="bold">
            {{ state.detailList.floor }}
          </div>
        </li>
      </ul>
    </li>
    <!-- 房源位置 及其 设置地址-->
    <div class="adress">
      <div class="house">
        <span> 房源位置</span>
        <p>&nbsp;{{ state.detailList.position }}</p>
        <img src="../assets/img/detail1.png" alt="" />
      </div>
      <div class="setadress">
        <div class="lineheight">
          <span>查看路线</span>
          <span></span>
          <span><br />地铁:{{ state.detailList.route }}</span>
          <img src="../assets/img/map.png" alt="" />
        </div>
      </div>
    </div>
    <!-- 发布+入住之类 -->
    <div class="public">
      <ul>
        <li>发布</li>
        <li>入住</li>
        <li>看房</li>
        <li>优惠</li>
      </ul>
      <ul>
        <li>{{ state.detailList.release_time }}发布</li>
        <li>{{ state.detailList.live_time }}</li>
        <li>咨询管家</li>
        <li>实时优惠</li>
      </ul>
      <ul>
        <li id="shoucang"><span>热度</span><span>9 收藏</span></li>
        <li></li>
        <li>
          <a href="javascript:;" @click="onClickhouse">咨询看房 ></a>
        </li>
        <van-popup v-model:show="show4"
          ><img
            src="https://cdn.baletoo.cn/Uploads/house_card_image/side/372925199805263119.jpg"
            alt=""
            style="width: 300px; height: 360px"
            @click="show4 = false"
        /></van-popup>
        <li><a href="javascript:;" @click="showPopupPage">咨询优惠 ></a></li>
        <!-- <van-cell is-link @click="showPopupPage">展示弹出层</van-cell> -->
        <van-popup v-model:show="showPage" closeable position="bottom">
          <!-- 优惠券单元格 -->
          <van-coupon-cell
            :coupons="state2.coupons"
            :chosen-coupon="state2.chosenCoupon"
            @click="state2.showList = true"
          />
          <!-- 优惠券列表 -->
          <van-popup
            v-model:show="state2.showList"
            round
            position="bottom"
            style="height: 90% !important; padding-top: 4px"
          >
            <van-coupon-list
              :coupons="state2.coupons"
              :chosen-coupon="state2.chosenCoupon"
              :disabled-coupons="disabledCoupons"
              @change="onChange"
              @exchange="onExchange"
            />
          </van-popup>
        </van-popup>
      </ul>
    </div>
    <!-- 转租+退押金... -->
    <div class="Sublease">
      <ul>
        <li><van-icon name="expand-o" color="#ee0a24" /> 转租退押</li>
        <li><van-icon name="cash-back-record" color="#ee0a24" /> 租金退结</li>
        <li>
          <van-icon name="service-o" color="#ee0a24" />
          <!-- 之后写路由，客服,图片，后面会在将转过去 -->
          <a href="javascript:;"> 专属客服</a>
        </li>
        <li>></li>
      </ul>
    </div>
    <!--巴乐兔服务  -->
    <div data-v-31fd8a25="" class="baletu-baner">
      <img
        data-v-31fd8a25=""
        src="//js.baletoo.cn/static/m/images/banner_serve.png"
        alt="巴乐兔服务"
      />
    </div>
    <!-- 房源设施 -->
    <div class="facilities">
      <div data-v-31fd8a25="" class="section sheshi">
        <div data-v-31fd8a25="" class="section-title">
          <div data-v-31fd8a25="" class="section-title-left">房源设施</div>
          <div data-v-31fd8a25="" class="section-title-right">
            <span
              data-v-31fd8a25=""
              class="more"
              v-for="(item, index) in state.detailList.facilities"
              :key="index"
              >{{ item }}</span
            >
            <i data-v-31fd8a25="" class="icon-arrow"></i>
          </div>
        </div>
        <div data-v-31fd8a25="" class="falicities-wrapper">
          <ul data-v-31fd8a25="" class="falicities-list">
            <li data-v-31fd8a25="" class="item">
              <img
                data-v-31fd8a25=""
                src="//js.baletoo.cn/Public/new_facilities/house/2.png?20201231"
                alt=""
              />
              <div data-v-31fd8a25="">双人床</div>
            </li>
            <li data-v-31fd8a25="" class="item">
              <img
                data-v-31fd8a25=""
                src="//js.baletoo.cn/Public/new_facilities/house/3.png?20201231"
                alt=""
              />
              <div data-v-31fd8a25="">衣橱</div>
            </li>
            <li data-v-31fd8a25="" class="item">
              <img
                data-v-31fd8a25=""
                src="//js.baletoo.cn/Public/new_facilities/house/4.png?20201231"
                alt=""
              />
              <div data-v-31fd8a25="">写字台</div>
            </li>
            <li data-v-31fd8a25="" class="item">
              <img
                data-v-31fd8a25=""
                src="//js.baletoo.cn/Public/new_facilities/house/7.png?20201231"
                alt=""
              />
              <div data-v-31fd8a25="">空调</div>
            </li>
            <li data-v-31fd8a25="" class="item">
              <img
                data-v-31fd8a25=""
                src="//js.baletoo.cn/Public/new_facilities/house/8.png?20201231"
                alt=""
              />
              <div data-v-31fd8a25="">电视</div>
            </li>
          </ul>
          <!-- 点击跳转页面 - 全部设施页面 -->
          <div data-v-31fd8a25="" class="falicities-more">全部</div>
        </div>
      </div>
    </div>
    <!-- 生活缴费 -->
    <div class="payment">
      <div class="pay">
        <span>生活缴费</span>
        <span @click="consulting">咨询费用<a href="javascript:;">></a></span>
      </div>
      <!-- 关于民水民电，网费-->
      <div class="paynetwork">
        <ul>
          <li>电费明细</li>
          <li>网费明细</li>
          <li>水费价格明细</li>
        </ul>
      </div>
      <!-- 关于 于民水民电，网费价格明细-->
      <div class="netprice">
        <ul>
          <li>
            <van-icon
              name="https://i.52112.com/icon/jpg/256/20170622/7092/442629.jpg"
            />
            <span>电费</span>
            <span> (抄表单项收费)</span>
            <span style="margin-left: 161px">1元 /度</span>
          </li>
          <li>
            <van-icon
              name="https://i.52112.com/icon/jpg/256/20200504/76607/3233584.jpg"
            />
            <span>网费</span>
            <span> (包月收费)</span>
            <span style="margin-left: 155px">20元 /人/月</span>
          </li>
          <li>
            <van-icon
              name="https://i.52112.com/icon/jpg/256/20190715/47876/2211565.jpg"
            />
            <span>水费</span>
            <span> (抄表单项收费)</span>
            <span style="margin-left: 125px">40元 /2人/月</span>
          </li>
        </ul>
      </div>
    </div>
    <!-- 公寓地址 -->
    <div class="maphouse">
      <div class="news">
        <span>{{ state.detailList.apartment }}</span>
        <span @click="jumpto">小区详情 ></span>
      </div>
      <!-- 地图 -->
      <!-- <div class="gaodemap" id="container">地图</div> -->
      <div class="gaodemap" id="container"></div>
      <!-- 地图上面的周边环境 -->
      <div class="surroundings">
        <van-tabs v-model:active="active2">
          <van-tab title="📍 位置">
            <ul>
              <li>
                <van-icon name="location-o" />{{ state.detailList.region }}
              </li>
            </ul>
          </van-tab>
          <van-tab title="🚇交通">
            <ul>
              <li v-if="state.detailList.traffic[0]">
                🚇 地铁: 👉{{ state.detailList.traffic[0].method }}
              </li>
              <li v-if="state.detailList.traffic[1]">
                🚌 公交: 👉{{ state.detailList.traffic[1].method }}
              </li>
            </ul>
          </van-tab>
          <van-tab title="🌳周边">
            <ul>
              <li>
                <span>🍔 饮食 </span>
                <span>
                  :
                  {{ state.detailList.around.eat }}......</span
                >
              </li>
              <li>
                <span>🛒 购物: </span>
                <span>
                  {{ state.detailList.around.shopping }}
                </span>
              </li>
              <li>
                <span>🥡 生活: </span>
                <span> {{ state.detailList.around.life }}</span>
              </li>
            </ul>
          </van-tab>
        </van-tabs>
      </div>
    </div>
    <!-- 附近公寓 -->
    <div class="apartment">
      <div class="aroundhouse">附近房源</div>
      <van-list
        v-model="state.loading"
        :finished="state.finished"
        finished-text="数据加载完毕"
        @load="onLoad"
        :immediate-check="false"
        offset="20"
      >
        <ul>
          <li
            v-for="item in state.repositories"
            :key="item.house_id"
            @click="godetail(item.house_id)"
          >
            <lazy-component>
              <img :src="item.imgUrl" alt="" v-lazy="item.imgUrl" />
            </lazy-component>
            <span class="posi"
              ><van-icon name="location-o" />{{ item.position }}</span
            >
            <!--  合租或整租 + 位置-->
            <div class="addzu">
              <span>{{ item.lease }}&nbsp;</span>
              <span>{{ item.apartment }}</span>
            </div>
            <p>{{ item.area }}m² · {{ item.face }}</p>
            <div class="houseprice">
              <span>{{ item.price }}</span>
              <span> 元/月</span>
            </div>
          </li>
          <li class="total">
            <button @click="handleClick" v-if="hidden">查看全部</button>
          </li>
        </ul>
      </van-list>
    </div>
    <!-- 房源信息有误 -->
    <div class="message">
      <p>
        <span>房源信息有误?</span>
        <span><button>📨投诉</button></span>
      </p>
    </div>
    <!-- 回到顶部效果 -->
    <div id="back" v-if="showback" @click="gobackTop">⬆回到顶部</div>
    <!-- 将底部固定住 -->
    <!-- 问管家 -->
    <div class="support"></div>
    <footer>
      <div class="call">
        <!-- <van-notice-bar left-icon="volume-o" text="" background="#ecf9ff">
        在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准.
      </van-notice-bar> -->
        <span>问管家</span>
        <span class="sapn"></span>
        <van-notice-bar
          color="#1989fa"
          background="#ecf9ff"
          left-icon="info-o"
          scrollable
          speed="50"
        >
          房子还在吗？👆
        </van-notice-bar>
        <van-notice-bar
          color="#1989fa"
          background="#ecf9ff"
          left-icon="info-o"
          scrollable
          speed="50"
        >
          租金能便宜吗？👌
        </van-notice-bar>
        <van-notice-bar
          color="#1989fa"
          background="#ecf9ff"
          left-icon="info-o"
          scrollable
          speed="50"
        >
          几室合租呢？🏠
        </van-notice-bar>
      </div>
      <van-action-bar>
        <!-- 收藏 -->
        <van-action-bar-icon
          icon="like"
          :text="textshoucang"
          :color="colored"
          @click="onClickCollect"
        />
        <!-- 电话 -->
        <van-action-bar-icon icon="phone-o" text="电话" @click="onClickPhone">
        </van-action-bar-icon>
        <!-- 电话用的是show2这个变量控制弹框 -->
        <van-popup
          v-model:show="show2"
          round
          closeable
          position="bottom"
          :style="{ height: '30%' }"
        >
          <div id="encode">
            <van-icon
              name="https://bpic.588ku.com/element_origin_min_pic/19/04/09/d8c58ae22bcb010230d57fd9afb624fd.jpg"
              @click="copyPhone"
            >
              点击复制号码</van-icon
            >
            <p>15671659932</p>
            <a href="tel:18511178920" class="callPhone">点击拨打经纪人电话</a>
          </div>
        </van-popup>
        <!-- 预约看房 -->
        <van-action-bar-button
          type="warning"
          text="预约看房"
          @click="showPopup"
          position="top"
        />
        <van-popup v-model:show="show">
          <van-contact-edit
            is-edit
            show-set-default
            set-default-label="允许经纪人通过电话访问"
            @save="onSave"
            :is-saving="boole"
            @delete="onDelete"
            :is-deleting="deleteperson"
          />
        </van-popup>
        <!-- 在线咨询 -->
        <van-action-bar-button
          type="danger"
          text="在线咨询"
          @click="onClickButton"
          to="/consult"
        />
      </van-action-bar>
    </footer>
  </div>
</template>

<script>
import { ref, onMounted, reactive, watch } from "vue";

/* 引入路由 */
import { useRouter, useRoute } from "vue-router";

import { Toast } from "vant";
import {
  getNearByData,
  getAllHousesData,
  getDetailsData,
  collectHouseData,
} from "../utils/app";

/* 引进地图 */
import AMapLoader from "@amap/amap-jsapi-loader";

/* 咨询优惠 */
const coupon = {
  available: 1,
  condition: "无使用门槛\n最多优惠1000元",
  reason: "",
  value: 100000,
  name: "优惠券名称",
  startAt: 1489104000,
  endAt: 1514592000,
  valueDesc: "1000",
  unitDesc: "元",
};
const coupon1 = {
  available: 1,
  condition: "无使用门槛\n最多优惠100元",
  reason: "",
  value: 50000,
  name: "优惠券名称",
  startAt: 1489104000,
  endAt: 1514592000,
  valueDesc: "100",
  unitDesc: "元",
};
export default {
  setup() {
    /* 定义路由要在set顶层定义  第一步从vue中引入路由方法*/
    const router = useRouter();
    /* 不加r就是自己的路由信息，拿到动态路由id值就用 route.params.id*/
    const route = useRoute();
    const state = reactive({
      repositories: [],
      pulllist: [],
      loading: false,
      finished: false,
      detailList: [],
      /* 收藏 */
      collectlist: [],
    });
    const num = ref(0);

    // console.log(route.params.id); //到时候这个值要写给后端,请求后端数据渲染页面
    // console.log(router);
    //点击 做跳转
    const jumpto = () => {
      router.push("/map");
    };
    /* 顶部左箭头 */
    const TopBack = () => {
      /* 回去 */
      history.go(-1);
    };

    const data = { cityname: " · 东都公寓", hezu: "合租", num: 1, price: 1800 };
    const active = ref(0);
    const active2 = ref(0);
    // 地图
    AMapLoader.load({
      key: "b91c0b25f2acb0fe927f0d42202f0fd2", // 申请好的Web端开发者Key，首次调用 load 时必填
      version: "1.4.15", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
      plugins: [], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      AMapUI: {
        // 是否加载 AMapUI，缺省不加载
        version: "1.1", // AMapUI 缺省 1.1
        plugins: [], // 需要加载的 AMapUI ui插件
      },
      Loca: {
        // 是否加载 Loca， 缺省不加载
        version: "1.3.2", // Loca 版本，缺省 1.3.2
      },
    })
      .then((AMap) => {
        // var map = new AMap.Map("container");
        // console.log(map);
        var map = new AMap.Map("container", {
          center: [120.283316, 30.351703],
          zoom: 15,
        });
        //实时路况图层
        var trafficLayer = new AMap.TileLayer.Traffic({
          zIndex: 10,
        });
        map.add(trafficLayer); //添加图层到地图
      })
      .catch((e) => {
        console.log(e);
      });
    /* 以上归地图 */

    // 底部轻提示效果 ->底部轻提示效果每个button可以弹出一个弹框 到时候重新写
    const onClickIcon = () =>
      Toast({
        message: "自定义图片",
        icon: "https://img.yzcdn.cn/vant/logo.png",
      });

    //用户登陆进来判断用户之前收藏的房源将他们的心心变成红色的页面上定义了数组，只需要在组件渲染的时候就判断
    //
    /*
    <li v-for="item in state.repositories" :key="item.house_id">
    <span :class="{active:state.collectlist.includes(item.house_id)}"><span>
    </li>
    */
    /* 点击收藏成功 */
    let colored = ref("#a6a6a6");
    let falg = ref(false);
    const textshoucang = ref("收藏");
    const onClickCollect = async () => {
      // 拿taken看存不存在，如果不存在就表示用户没有登陆，需要跳转到登录页面
      // 若用户已经登录，
      // localStorage.getItem("token");
      if (localStorage.getItem("token")) {
        /* 用户已登陆 */
        state.collectlist = JSON.parse(localStorage.getItem("gather"));
        if (state.collectlist.indexOf(+route.params.id) == -1) {
          // 不存在
          /* 判断是否存在房源id存在表示之前收藏过，不存在表示没有收藏过，但是现在点击了要将他添加进gather中同时变成红心表示已收藏 */
          state.collectlist.push(+route.params.id);
          colored.value = "red";
          textshoucang.value = "已收藏";
          falg.value = true;
          Toast({
            message: "收藏成功",
            icon: "https://i.52112.com/icon/jpg/256/20190422/37229/1776131.jpg",
          });
          localStorage.setItem("gather", JSON.stringify(state.collectlist));
          const res = await collectHouseData({
            token: localStorage.getItem("token"),
            gather: state.collectlist,
          });
          console.log(res);
        } else {
          /* 存在，但是还是点击了按钮表示要取消收藏 ，将gethar里面的这个房源id去掉，同时将 颜色什么的变成灰色*/
          textshoucang.value = "收藏";
          colored.value = "#a6a6a6";
          falg.value = false;
          Toast({
            message: "取消收藏",
            icon: "https://i.52112.com/icon/jpg/256/20190422/37229/1776134.jpg",
          });
          /* filter不改变原数组要重新复制 */ // 将gethar里面的这个房源id去掉
          state.collectlist = state.collectlist.filter(
            (item) => route.params.id != item
          );
          /* 将处理完毕的数组重新存进本地存储 */
          localStorage.setItem("gather", JSON.stringify(state.collectlist));
          const res = await collectHouseData({
            token: localStorage.getItem("token"),
            gather: state.collectlist,
          });
          console.log("res:", res);
        }
      } else {
        /* 没有token代表没登陆跳转到登陆页面 */
        router.push("/login");
      }
    };
    if (localStorage.getItem("token")) {
      state.collectlist = JSON.parse(localStorage.getItem("gather"));
      if (state.collectlist.includes(+route.params.id)) {
        colored.value = "red";
        textshoucang.value = "已收藏";
        falg.value = true;
      }
    }
    // console.log(state.collectlist);
    const onClickButton = () => Toast("点击按钮");

    /* 点击电话按钮 */
    const show2 = ref(false);
    const onClickPhone = () => {
      show2.value = true;
    };

    /* 点击付款方式 */
    const show3 = ref(false);
    const onClickpay = () => {
      show3.value = true;
    };

    /*点击咨询看房  */
    const show4 = ref(false);
    const onClickhouse = () => {
      show4.value = true;
    };

    /* 点击预约 */
    const show = ref(false);
    const showPopup = () => {
      show.value = true;
    };

    // 控制保存的时候有没有加载
    let boole = ref(false);

    /* 点击的时候保存有轻提示 */
    const onSave = () => {
      // console.log(content);
      boole.value = true;
      setTimeout(() => {
        boole.value = false;
        show.value = false;
      }, 2000);
      Toast("保存信息成功，经纪人将在1个小时内跟您联系，请您保持电话通畅！");
      setTimeout(() => {
        Toast.clear();
      }, 1000);
    };

    /* 点击删除的时候的轻提示 */
    const deleteperson = ref(false);
    const onDelete = (content) => {
      // console.log(content);

      /* 点击删除的时候将所有信息设置为空 */
      content.tel = "";
      content.name = "";
      deleteperson.value = true;
      setTimeout(() => {
        deleteperson.value = false;
      }, 2000);
      Toast("您已经成功删除该信息");
    };

    /* 在线咨询 */

    /* 头顶红色 */
    const badge = ref(3);
    let dot = ref(false);
    const onbadge = () => {
      badge.value = "";
      dot.value = true;
      localStorage.setItem("dot", dot.value);
      router.push("/home/news");
    };
    // 注意从本地存储取出来的东西是字符串
    dot.value = Boolean(localStorage.getItem("dot"));
    /* 头顶红色 */

    /* 附近房源 */
    const getUserRepositories = async () => {
      const res = await getNearByData();
      state.repositories = res.list;
      // console.log(state.repositories);
      return state.repositories;
    };
    onMounted(getUserRepositories); // 在 `mounted` 时调用 `getUserRepositories`

    /* 获取详情页完整数据 */
    const getDetailsDataAsync = async () => {
      const res = await getDetailsData({ id: route.params.id });
      state.detailList = res.data;
      // console.log(state.detailList);
    };
    onMounted(getDetailsDataAsync);

    const godetail = (id) => {
      num.value++;
      console.log(num.value);
      // 点击跳转至其他详情页面
      router.push("/detail/" + id);

      // 加上定时器重新请求数据，加上定时器原因：
      // setTimeout(() => {
      //   console.log(route.params.id);
      //   getDetailsDataAsync();
      // }, 0);
    };
    watch(
      route,
      () => {
        // console.log(route.params.id);
        // location.reload();
        AMapLoader.load({
          key: "b91c0b25f2acb0fe927f0d42202f0fd2", // 申请好的Web端开发者Key，首次调用 load 时必填
          version: "1.4.15", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
          plugins: [], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
          AMapUI: {
            // 是否加载 AMapUI，缺省不加载
            version: "1.1", // AMapUI 缺省 1.1
            plugins: [], // 需要加载的 AMapUI ui插件
          },
          Loca: {
            // 是否加载 Loca， 缺省不加载
            version: "1.3.2", // Loca 版本，缺省 1.3.2
          },
        })
          .then((AMap) => {
            // var map = new AMap.Map("container");
            // console.log(map);
            var map = new AMap.Map("container", {
              center: [120.283316, 30.351703],
              zoom: 15,
            });
            //实时路况图层
            var trafficLayer = new AMap.TileLayer.Traffic({
              zIndex: 10,
            });
            map.add(trafficLayer); //添加图层到地图
          })
          .catch((e) => {
            console.log(e);
          });
        getDetailsDataAsync();
      },
      {
        deep: true,
      }
    );

    /* 查看全部的点击事件 */
    let page = 1;
    let hidden = ref(true);
    const handleClick = async () => {
      const res = await getAllHousesData({
        page,
      });
      state.repositories = state.repositories.concat(res.list);
      page++;
      // console.log(state.repositories);
      hidden.value = false;
    };

    // 定义定时间名称
    let timer;

    /* 上拉加载 */
    const onLoad = () => {
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      if (page > 1) {
        // 数据全部加载完成
        // console.log("length:" + state.repositories.length);
        // if (state.repositories.length >= 27) {
        //   state.finished = true;
        // }
        clearTimeout(timer);
        timer = setTimeout(async () => {
          const res = await getAllHousesData({
            page,
          });
          state.loading = false;
          state.repositories = state.repositories.concat(res.list);
          page++;
          if (state.repositories.length >= 27) {
            state.finished = true;
          }
          // // 加载状态结束
          // state.loading = false;
        }, 3000);
      }
    };
    /* 咨询优惠 */
    const showPage = ref(false);
    const showPopupPage = () => {
      showPage.value = true;
    };
    const state2 = reactive({
      coupons: [coupon, coupon1],
      showList: false,
      chosenCoupon: -1,
    });

    const onChange = (index) => {
      state2.showList = false;
      state2.chosenCoupon = index;
    };
    const onExchange = () => {
      state2.coupons.push(coupon);
      // console.log(code);
    };

    // 咨询费用
    const consulting = () => {
      router.push("/consult");
    };

    /* 点击复制电话号码 */
    const copyPhone = () => {
      Toast("复制成功");
    };
    /* 回到顶部 */
    const showback = ref(false);
    /* 滚轮事件的事件处理函数 */
    const goback = () => {
      // 获取滚动条位置
      const top = document.documentElement.scrollTop;
      // console.log(top);
      // 当top等于1600时候可以回到顶部
      if (top >= 1400) {
        // console.log("该回到顶部了");
        showback.value = true;
      } else {
        showback.value = false;
      }
    };
    // 鼠标滚轮事件的事件监听
    addEventListener("scroll", goback);
    /* 点击回到顶部 */
    const gobackTop = () => {
      // 获取滚动条距离顶部位置将位置设置为0就可以回到顶部
      // document.documentElement.scrollTop = 0;可以用这个设置回到顶部
      scrollTo(0, 0); //回到顶部的方法
    };
    return {
      num,
      godetail,
      TopBack,
      dot,
      // 回到顶部
      gobackTop,
      goback,
      showback,
      // 已收藏
      textshoucang,
      /* 复制电话号码 */
      copyPhone,
      // 咨询费用
      consulting,
      /* 咨询优惠 */
      state2,
      onChange,
      onExchange,
      disabledCoupons: [coupon],
      showPage,
      showPopupPage,
      onbadge,
      badge,
      onClickhouse,
      show4,
      show3,
      onClickpay,
      jumpto,
      deleteperson,
      falg,
      data,
      active,
      show,
      colored,
      state,
      handleClick,
      /* 点击电话 */
      show2,
      onClickPhone,
      /* 点击收藏成功 */
      onClickCollect,
      showPopup,
      onClickIcon,
      onClickButton,
      onSave,
      onDelete,
      boole,
      getUserRepositories,
      /* 点击加入购物车 */
      onLoad,
      hidden,
      active2,
    };
  },
};
</script>

<style lang="less">
.detail {
  .icon-arrow[data-v-31fd8a25] {
    background: url()
      no-repeat 50%/100%;
    width: 0.4rem;
    height: 0.2rem;
    margin-left: 0.18rem;
  }
  #encode {
    i {
      display: block;
      height: 60px;
      width: 100%;
      margin-top: 40px;
      text-align: center;
      img {
        height: 60px;
        vertical-align: middle;
        margin: 0 10px;
        width: 36px;
      }
    }
    p {
      letter-spacing: 0.08rem;
      width: 100%;
      height: 2.33333rem;
      line-height: 2rem;
      padding: 0.26667rem;
      text-align: center;
      margin-top: 0.66667rem;
      font-size: 1.06667rem;
    }
    .callPhone {
      display: block;
      text-align: center;
      line-height: 1.66667rem;
      width: 86%;
      height: 1.66667rem;
      background-color: #87ce87;
      border-radius: 0.53333rem;
      margin: 60px auto;
    }
  }
  .van-tabs .van-tab--active {
    color: red;
  }
  background-color: #fff;
  .van-list {
    height: 100%;
  }
  //title
  .van-nav-bar {
    .van-icon {
      color: black;
      font-size: 38px/2;
    }
    .title {
      width: 71/2px;
      height: 34/2px;
      font-size: 36/2px;
      font-family: PingFang SC;
      font-weight: 520;
      color: #333333;
    }
    .titlelet {
      width: 172/2px;
      height: 34/2px;
      font-size: 36/2px;
      font-family: PingFang SC;
      font-weight: 520;
      color: #333333;
    }
    .van-nav-bar__right {
      width: 90px;
      justify-content: space-between;
    }
  }
  // tab导航栏
  .themwidth {
    width: 300px;
  }
  // 详情页图片
  .detailimg {
    width: 85%;
    margin: 10px auto;
    .my-swipe {
      border-radius: 10px;
      .van-swipe-item {
        height: 202px;
        width: 312px;
        color: #fff;
        font-size: 20px;
        line-height: 150px;
        text-align: center;
        // background-color: #39a9ed;
      }
    }
  }
  // 详情页说明

  .explain {
    display: flex;
    margin: 0 auto;
    // 巴乐兔服务管家
    //近地铁
    span:nth-child(n + 3) {
      margin-left: 10px;
      height: 22px;
      line-height: 22px;
      font-size: 22/2px;
      font-family: PingFang SC;
      font-weight: bold;
      color: #555;
      background: #ededed;
      opacity: 0.5;
      border-radius: 2px;
    }
    span:nth-child(1) {
      margin: 0 0 0 27px;
      width: 104px;
      padding: 0 2px;
      height: 22/2px;
      font-size: 22/2px;
      font-family: PingFang SC;
      font-weight: bold;
      color: #fb4e3e;
      height: 40/2px;
      line-height: 15px;
      border: 2px solid #bc585d;
      border-right: none;
      border-top-left-radius: 2px;
      border-bottom-left-radius: 2px;
      letter-spacing: 1px;
    }
    // 免佣
    span:nth-child(2) {
      // margin: 0 0 0 27px;
      width: 37px;
      padding: 0 2px;
      font-size: 22/2px;
      height: 40/2px;
      line-height: 16px;
      font-family: PingFang SC;
      font-weight: bold;
      color: #ffffff;
      background: #f84134;
      border-top-right-radius: 2px;
      border-bottom-right-radius: 2px;
      border: 2px solid #bc585d;
      border-left: none;
      text-align: center;
    }
  }
  // 价格及付款方式
  .house-price-wrapper {
    margin: 10px;
  }
  .house-price-wrapper[data-v-31fd8a25] {
    padding: 0.22rem 7% 0;
    position: relative;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    // 价格
    .house-price-left[data-v-31fd8a25] {
      display: flex;
      color: #a0a0a0;
      font-size: 0.28rem;
      .price-text[data-v-31fd8a25] {
        color: #ee3943;
        font-weight: 500;
      }
      .bold[data-v-31fd8a25] {
        font-size: 60/2px;
      }
    }
    //付款方式
    .price-detail-title[data-v-31fd8a25] {
      display: flex;
      box-align: center;
      -ms-flex-align: center;
      align-items: center;
      color: #4e8cee;
      font-size: 0.28rem;
      line-height: 0.3rem;
      height: 100%;
    }
  }
  //朝向
  .house-ms[data-v-31fd8a25] {
    margin-top: 20px;
    padding: 0.2rem 0.37rem 0.2rem 0.54rem;
    margin: 0 0.3rem;
    background: #f8f8f8;
    ul[data-v-31fd8a25] {
      overflow: hidden;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: justify;
      -ms-flex-pack: justify;
      justify-content: space-between;
      li[data-v-31fd8a25] {
        font-size: 0.26rem;
        color: #7d7d7d;
        text-align: center;
        .bold[data-v-31fd8a25] {
          height: 29/2px;
          font-size: 30/2px;
          font-family: PingFang SC;
          color: #333333;
          margin-top: 0.2rem;
          line-height: 29/2px;
          font-weight: 900;
        }
      }
    }
  }
  // 房源位置和朝向
  .adress {
    width: 750/2px;
    height: 308/2px;
    background: #ffffff;
    display: flex;
    margin: 0 auto;
    flex: 1;
    justify-content: center;
    align-items: center;
    // 房源位置
    .house {
      // display: flex;
      // flex-wrap: wrap;
      // align-items: center;
      // flex-flow: row wrap;
      margin: 0 5px;
      padding: 0.1833rem;
      width: 336/2px;
      height: 3rem;
      border: 1px solid #f0f0f0;
      border-radius: 10/2px;
      span:nth-child(1) {
        margin-top: 0.248rem;
        display: block;
        width: 122/2px;
        height: 29/2px;
        font-size: 30/2px;
        font-family: PingFang SC;
        font-weight: bold;
        color: #333333;
      }
      p:nth-child(2) {
        margin-top: 16px;
        // width: 1.56rem;
        height: 0.30667rem;
        font-size: 0.32rem;
        font-family: PingFang SC;
        font-weight: 400;
        color: #a6a6a6;
        // width: 117/2px;
        // height: 23/2px;
        // font-size: 24/2px;
        // font-family: PingFang SC;
        // font-weight: 400;
        // color: #a6a6a6;
      }
      img {
        display: block;
        width: 68/1.5px;
        height: 72/1.5px;
        margin-left: 100px;
        margin-top: 4px;
      }
    }
    // 设置地址
    .setadress {
      padding: 0.1833rem;
      width: 336/2px;
      height: 3rem;
      border: 1px solid #f0f0f0;
      border-radius: 10/2px;
      .lineheight {
        span:nth-child(1) {
          width: 122/2px;
          height: 29/2px;
          font-size: 30/2px;
          font-family: PingFang SC;
          font-weight: bold;
          color: #333333;
        }
        span:nth-child(2),
        span:nth-child(3) {
          width: 117/2px;
          height: 23/2px;
          font-size: 24/2px;
          font-family: PingFang SC;
          font-weight: 400;
          color: #a6a6a6;
        }
        img {
          display: block;
          width: 68/1.5px;
          height: 72/1.5px;
          margin-left: 100px;
        }
      }
    }
    //
  }
  // 发布+入住之类
  .public {
    display: flex;
    ul:nth-child(1) {
      li {
        width: 60/2px;
        height: 28/2px;
        font-size: 30/2px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #929292;
        margin: 10px 20px 10px 20px;
      }
    }
    ul:nth-child(2) {
      li {
        width: 140/2px;
        height: 28/2px;
        font-size: 30/2px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #2e2e2e;
        margin: 10px 24px 10px 0;
      }
    }
    ul:nth-child(3) {
      // background-color: rgb(255, 0, 230);
      margin-left: 100px;
      li {
        span:nth-child(1) {
          margin: 0 10px 0 0;
        }
        span:nth-child(2) {
          width: 78/2px;
          height: 28/2px;
          font-size: 30/2px;
          font-family: PingFang SC;
          font-weight: 500;
          color: #2e2e2e;
        }
        height: 28/2px;
        margin: 0.27rem 24px 10px 0;
        font-size: 30/2px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #929292;
      }
      a {
        width: 117/2px;
        height: 28/2px;
        font-size: 30/2px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #5f8edb;
      }
    }
  }
  // 转租
  .Sublease {
    margin-top: 15px;
    height: 30px;
    ul {
      display: flex;
      li {
        height: 23/2px;
        font-size: 24/2px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #424242;
        margin-left: 18px;
      }
      li:nth-child(4) {
        margin-left: 85px;
      }
    }
  }
  // 巴乐兔服务
  .baletu-baner {
    // img {
    //   border: none;
    //   vertical-align: middle;
    //   font-size: 0;

    // }
    img[data-v-31fd8a25] {
      width: 100%;
    }
    img {
      border: none;
      vertical-align: middle;
      font-size: 0;
    }
  }
  // 房源设施
  .facilities {
    width: 750/2px;
    height: 3.6rem;
    .section.sheshi[data-v-31fd8a25],
    .section.zhoubian[data-v-31fd8a25] {
      margin-top: 0.2rem;
      .section-title[data-v-31fd8a25] {
        display: flex;
        padding: 0.4rem 0.3rem 0;
        -webkit-box-pack: justify;
        justify-content: space-between;
        -webkit-box-align: center;
        align-items: center;
        .section-title-left[data-v-31fd8a25] {
          color: #1c1c1c;
          font-size: 0.36rem;
          font-weight: 700;
        }
        .section-title-right {
          display: flex;
          flex: 1;
          justify-content: space-around;
          span {
            height: 100%;
            background-color: rgba(168, 193, 230, 0.2);
            padding: 5px;
            border-radius: 5px;
          }
          span:nth-child(1) {
            margin-left: 30px;
          }
          color: #5f8edb;
          font-size: 0.28rem;
          .icon-arrow[data-v-31fd8a25] {
            width: 0.2rem;
            height: 0.2rem;
            display: inline-block;
            background: url()
              no-repeat 50%/100%;
          }
        }
      }
    }
    .falicities-wrapper .falicities-list[data-v-31fd8a25],
    .falicities-wrapper[data-v-31fd8a25] {
      display: flex;
      .item[data-v-31fd8a25] {
        margin-top: 5px;
        img {
          width: 30px;
          height: 30px;
        }
        width: 120/2px;
        height: 23/2px;
        font-size: 24/2px;
        font-family: PingFang SC;
        font-weight: 500;
        text-align: center;
      }
    }
    .falicities-more {
      width: 40px;
      height: 40px;
      margin: 10px 0 0 20px;
      line-height: 40px;
      text-align: center;
      background-color: #eee;
      font-size: 15px;
      border-radius: 50%;
    }
    .section-title {
      height: 40px;
      margin-bottom: 10px;
    }
  }
  // 生活缴费
  .payment {
    width: 750px/2;
    height: 440/2px;
    margin-bottom: 10px;
    .pay {
      width: 740px/2;
      margin: 0 auto;
      height: 50px;
      padding: 10px;
      display: flex;
      border-bottom: 1px #eee solid;
      justify-content: space-between;
      span:nth-child(1) {
        width: 145/2px;
        height: 35/2px;
        font-size: 36/2px;
        font-family: PingFang SC;
        font-weight: bold;
        color: #333333;
      }
      span:nth-child(2) {
        line-height: 40/2px;
        width: 160/2px;
        height: 0.5rem;
        font-size: 30/2px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #5f8edb;
        a {
          color: #5f8edb;
        }
      }
    }
    // 关于民用水电...
    .paynetwork {
      margin-top: 10px;
      ul {
        display: flex;
        // justify-content: space-around;
        li {
          margin-left: 10px;
          height: 60/2px;
          padding: 0 10px;
          border-radius: 8px;
          line-height: 60/2px;
          font-size: 24/2px;
          font-family: PingFang SC;
          font-weight: 500;
          color: #5f8edb;
          background-color: rgba(168, 193, 230, 0.2);
        }
      }
    }
    //关于民水民电的价格明细
    .netprice {
      ul {
        li {
          margin: 10px auto;
          .van-icon__image {
            width: 43/2px;
            height: 43/2px;
            vertical-align: middle;
            margin: 0 10px 0 10px;
          }
          span:nth-child(2) {
            // width: 55/2px;
            height: 28/2px;
            font-size: 30/2px;
            font-family: PingFang SC;
            font-weight: 500;
            vertical-align: middle;
            color: #0a0a0a;
          }
          span:nth-child(3) {
            width: 104/2px;
            height: 23/2px;
            font-size: 24/2px;
            font-family: PingFang SC;
            font-weight: 500;
            color: #a1a1a1;
          }
          span:nth-child(4) {
            width: 169/2px;
            height: 28/2px;
            font-size: 30/2px;
            font-family: PingFang SC;
            font-weight: 500;
            color: #0a0a0a;
          }
        }
      }
    }
  }
  // 关于地图
  .maphouse {
    width: 750/2px;
    .news {
      display: flex;
      justify-content: space-between;
      padding: 0 10px;
      height: 50px;
      line-height: 50px;
      span:nth-child(1) {
        font-size: 36/2px;
        font-family: PingFang SC;
        font-weight: bold;
        color: #333333;
        letter-spacing: 1px;
      }
      span:nth-child(2) {
        letter-spacing: 1px;
        font-size: 30/2px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #5f8edb;
      }
    }
    //地图
    #container {
      width: 750/2px;
      height: 329/2px;
      background-color: rosybrown;
    }
    .surroundings {
      // position: absolute;
      // left: 0;
      // right: 0;
      // bottom: -6.26667rem;
      background-color: white;
      margin: auto;
      border: 0.02667rem solid #f0f0f0;
      border-radius: 5px;
      z-index: 1000;
      .van-tabs__wrap {
        margin: 0 auto;
        width: 95%;
        margin-top: 20px;
      }
      .van-tabs__content {
        margin: 0 auto;
        width: 95%;
        // height: 150px;
        .van-tab__pane {
          width: 100%;
          height: 100%;
          font-size: 24/2px;
          font-family: PingFang SC;
          font-weight: bold;
          color: #565656;
          padding: 10px;
          ul li {
            margin: 10px;
            line-height: 25px;
            font-weight: 500;
            color: #333;
            font-size: 13px;
          }
          .van-icon {
            margin-right: 8px;
          }
        }
      }
    }
  }
  //附近房源
  .apartment {
    overflow: scroll;
    height: 1200px;
    .aroundhouse {
      margin: 20px;
      width: 144/2px;
      height: 35/2px;
      font-size: 36/2px;
      font-family: PingFang SC;
      font-weight: bold;
      color: #333333;
    }
    ul {
      display: flex;
      flex-flow: wrap;
      li {
        position: relative;
        width: 4.19rem;
        margin: 15px 0 0 0.53rem;
        img {
          height: 2.96667rem;
          width: 4.2rem;
        }
        .posi {
          position: absolute;
          left: 0;
          top: 80px;
          width: 162/2px;
          height: 23px;
          opacity: 0.75;
          font-size: 24/2px;
          font-family: PingFang SC;
          font-weight: bold;
          color: #ffffff;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
        .addzu {
          margin: 5px 0;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          span:nth-child(1) {
            width: 187/2px;
            height: 26/2px;
            font-size: 28/2px;
            font-family: PingFang SC;
            font-weight: 500;
            color: #333333;
          }
          span:nth-child(2) {
            width: 187/2px;
            height: 26/2px;
            font-size: 28/2px;
            font-family: PingFang SC;
            font-weight: 500;
            color: #333333;
          }
        }
        p {
          height: 23/2px;
          font-size: 24/2px;
          font-family: PingFang SC;
          font-weight: 400;
          color: #636363;
        }
      }
      .houseprice {
        margin-top: 5px;
        span:nth-child(1) {
          width: 82/2px;
          height: 28/2px;
          font-size: 36/2px;
          font-family: PingFang SC;
          font-weight: 500;
          color: #e81f35;
        }
        span:nth-child(2) {
          width: 56/2px;
          height: 23/2px;
          font-size: 24/2px;
          font-family: PingFang SC;
          font-weight: 500;
          color: #e81f35;
        }
      }
    }
  }
  .message {
    margin: 10px 20px;
    height: 40px;
    line-height: 40px;
    font-size: 28/2px;
    font-family: PingFang SC;
    font-weight: 500;
    color: #474747;
    p {
      display: flex;
      // background-color: rgb(245, 245, 242);
      span:nth-child(2) {
        margin-left: 140px;
        button {
          width: 100px;
          padding: 2px;
          background-color: rgb(226, 226, 223);
          height: 25px;
          border-radius: 5px;
          border: 0px;
        }
      }
    }
  }
  .support {
    /* 解决支撑 */
    height: 125px;
    background-color: #fff;
    z-index: 9999;
  }
  /* footer */
  footer {
    width: 100%;
    position: fixed;
    z-index: 2000;
    bottom: 0;
    /* 问管家 */
    .call {
      background-color: #fff;
      display: flex;
      position: fixed;
      bottom: 69px;
      span {
        margin-left: 10px;
        height: 26/2px;
        font-size: 28/2px;
        font-family: PingFang SC;
        font-weight: 500;
        line-height: 60px;
        color: #646464;
      }
      .sapn {
        background-color: #f8f4f4;
        width: 3px;
        height: 28px;
        margin: 15px 0 0 10px;
        display: inline-block;
      }
      .van-notice-bar {
        padding: 0;
        margin: 10px 10px 0 10px;
        border-radius: 10px;
        width: 80px;
        i {
          margin-left: 2px;
        }
      }
    }
    background-color: #fff;
    .van-button {
      width: 216/2px;
      height: 94/2px;
      border-radius: 10px;
      margin-right: 10px;
      border-radius: 10px;
    }
    .van-action-bar {
      height: 70px;
      .van-action-bar-icon {
        width: 40/2px;
        height: 18/2px;
        font-size: 20/2px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #333333;
      }
    }
  }
  /* 点击预约看房弹出层 */
  .van-popup--center {
    width: 300px;
    height: 350px;
    .van-contact-edit__buttons {
      margin: 0 auto;
      .van-button {
        width: 100%;
      }
    }
  }
  .total {
    width: 375px !important;
    margin-right: 0.53rem !important;
    button {
      border-radius: 5px;
      border: 0;
      width: 100%;
      height: 40px;
    }
  }
  /* 点击付款方式 */
  .van-popup {
    height: 360px !important;
    .popmessage {
      display: flex;
      flex-direction: column;
      margin: 20px auto;
      height: 300px;
      width: 9rem;
      // background-color: red;
      .pricedetail {
        height: 53px;
        width: 100%;
        text-align: center;
        font-size: 0.44rem;
        line-height: 0.5rem;
        padding: 0.15rem 0 0.4rem;
        color: #1c1c1c;
        border-bottom: 1px solid #f0f0f0;
      }
      /* 租金 */
      .zujin {
        height: 53px;
        width: 100%;
        padding-top: 0.3rem;
        padding-bottom: 0.2rem;
        span:nth-child(1) {
          font-size: 0.34rem;
          color: #1c1c1c;
        }
        span:nth-child(2) {
          font-size: 0.24rem;
          color: #b3b3b3;
        }
      }
      /* 价格 */
      ul {
        border-bottom: 1px solid #f0f0f0;
        margin-bottom: 0.3rem;
        color: #505050;
        li {
          height: 40px;
          line-height: 40px;
          box-sizing: border-box;
          padding: 0 10px;
        }
        li {
          display: flex;
          justify-content: space-between;
          margin-top: 15px;
          span {
            max-width: 4rem;
            display: inline-block;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }
        li:nth-child(3) {
          color: #ee3943;
          font-weight: 700;
        }
      }
      /* 我知道了 */
      .iknow {
        height: 60px;
        margin-top: 0px;
        background: #ff4b63;
        border-radius: 20px;
        color: #5b5a5a;
        font-weight: 500;
        line-height: 60px;
        text-align: center;
        font-size: 20px;
      }
    }
  }
  /* 回到顶部 */
  #back {
    position: fixed;
    bottom: 3.53333rem;
    z-index: 999999;
    opacity: 2.2;
    right: 0.26667rem;
    line-height: 0.8rem;
    font-size: 0.38rem;
    height: 1.5rem;
    text-align: center;
    width: 42px;
    width: 1rem;
    background-color: #bae8eb;
  }
}
</style>
